<template>
  <div class="bodyColor" :style="bodyHeight">
      <div class="videoDetail" v-if="isDiv">
            <!-- <video :src="videoArr.videoPath" :poster="videoArr.coverPath" width="100%" controls controlsList="nodownload" ref="videoPlayer"></video> -->
           <video id="myvideo" :src="videoArr.videoPath" :poster="videoArr.coverPath" controls controlsList="nodownload" width="100%" ref="videoPlayer">
            your browser does not support the video tag
            </video>
           <div class="divTitBox" :style="nameBoxStyle">
                <h2 class="colorFFF">{{videoArr.title}}</h2>
                <span class="colorFFF fontSize28">
                    {{videoArr.content}}
                </span>
                <commemt-content :child-type="2" :videoId="videoId" :newsType="2"></commemt-content> 
            </div>   
      </div>
  </div>
</template>
<style src='../../assets/css/detail.css'></style>
<script>
import apiDetail from '../../api/detail'
import commemt from '@/components/comments/comments'

export default {
  data(){
      return{
            bodyHeight:{
                minHeight:document.body.clientHeight+'px',
            },
            isVideoFixed:true,
            videoArr:'',
            videoId:this.$route.params.videoId,
            nameBoxStyle:{
                paddingTop:''
            },
            isDiv: false
      }
  },
  components: {
    "commemt-content":commemt
  },
  mounted(){
      this.video()
  },
  methods:{
      // 添加历史记录
    readHistory(){
      let parms = {
                  userId:this.$route.query.userId,
                  newsId:this.$route.params.videoId,
                  newsType:2,
                  nickname:this.videoArr.nickname,
                  title:this.videoArr.title,
                  coverPath:this.videoArr.coverPath,
                  pageStyle:this.videoArr.pageStyle,
                  keywords:this.videoArr.keyword,
                  userType:this.$route.params.userType
                  }
      apiDetail.readHistory(parms).then(data=>{
       
      })
    },
      // 视频详情
      video(){
          apiDetail.videoDetail({id:this.$route.params.videoId,newsType:2}).then(data => {
             this.isDiv = true
             this.videoArr = data.body.data.list[0]
             if(this.$route.query.userId){
                 this.readHistory()
             }
             this.$nextTick(()=>{
                 this.nameBoxStyle.paddingTop = this.$refs.videoPlayer.clientHeight + 20 + 'px'
             })
          })
      },
      // 跳转评论页面
      commentsHref(){
          this.$router.push({ name: 'comments', params: { type: 'video',id:this.videoId}})
      }
  }
}
</script>

<style scoped>
    .bodyColor{
        background-color: #3e3a39;
    }
    .videoDiv >>> .addBox{
        color: #ffffff;
    }
    .videoDiv >>> .dianzanClass{
        color: #ffffff;
    }
    .videoDiv >>> .isComments{
        color: #ffffff;
    }
    .videoDiv >>> .moreComments{
        color: #ffffff;
    }
    .videoDiv >>> .waiweiBox{
        background-color: #3e3a39;
    }
    .videoDiv >>> .bianhao{
        color: #ffffff;
    }
    video::-webkit-media-controls-fullscreen-button{ display: none; }
    video::-webkit-media-controls-panel{
        background-color: rgb(0, 0, 0, .3)
    }
    video::-webkit-media-controls-current-time-display{
        color: rgb(255, 555, 255)
    }
    video::-webkit-media-controls-enclosure{
        height: 30px;
        min-height: 30px;
    }
    video::-webkit-media-controls-panel{
        height: 30px;
        min-height: 30px;
    }
    video::-webkit-media-controls-current-time-display{
        height: 30px;
        line-height: 30px;
    }
    video::-webkit-media-controls-time-remaining-display{
        height: 30px;
        line-height: 30px;
        color: #ffffff;
    }
    video::-webkit-media-controls-play-button{
        width: 30px;
        height: 30px;
    }
    video::-webkit-media-controls-mute-button{
        width: 30px;
        height: 30px;
    }
</style>
